<!--  -->

<script>
    // via File object (File --> blob) File 是继承自 Blob
    // new File(fileParts, fileName, [options])
    // fileParts —— Blob/BufferSource/String 类型值的数组。
    // fileName —— 文件名字符串
    let link = document.createElement('a');
    let file = new File(['Hello, world!'], 'file.txt');
    link.download = file.name;
    link.href = URL.createObjectURL(file); // create url: blob:origin/uuid
    link.click();
    URL.revokeObjectURL(link.href); // remove reference of url

</script>



<input type="file" onchange="showFile(this)">
<script>
    // 从 <input type="file"> 或拖放或其他浏览器接口来获取文件。
    // 在这种情况下，file 将从操作系统（OS）获得 this 信息。

    // 输入（input）可以选择多个文件，因此 input.files 是一个类数组对象。
    // 这里我们只有一个文件，所以我们只取 input.files[0] 。
    function showFile(input) {
        let file = input.files[0];
        alert(`File name: ${file.name}`); // 例如 my.png
        alert(`Last modified: ${file.lastModified}`); // 例如 1552830408824
    } 
</script>


<input type="file" onchange="readFile(this)">
<script>
    // FileReader 不仅可读取文件，还可读取任何 blob
    // File 是继承自 Blob
    /*
可以使用它将 blob 转换为其他格式：
    readAsArrayBuffer(blob) —— 转换为 ArrayBuffer ，
    readAsText(blob, [encoding]) —— 转换为字符串（ TextDecoder的一个替代方案），
    readAsDataURL(blob) —— 转换为 base64 的 data url。

    */
    function readFile(input) {
        let file = input.files[0];
        let reader = new FileReader();
        reader.readAsText(file);
        reader.onload = function () {
            console.log(reader.result);
        };
        reader.onerror = function () {
            console.log(reader.error);
        };
    } 
</script>